<template>
  <div v-loading="fullLoading" element-loading-text="加载中">
    <div class="bgc-default pad-20">
      <div class="bg-color-white pad-20">
        <el-steps :active="activeStep" class="step-bar mar-t-30 mar-b-30" finish-status="success" align-center>
        <el-step title="企业下单"></el-step>
        <el-step :title="stepTitle"></el-step>
        <el-step title="买家收货"></el-step>
      </el-steps>
      </div>
    </div>
    <div class="bgc-default pad-l-20 pad-r-20 pad-b-20">
      <div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">买家信息</div>
                <template v-if="apartOrderObj.projectOrder.encryptReceiveFlag == 1">
                  <el-tooltip class="item" effect="dark" content="点击查看收货信息" placement="top-start">
                    <img :src="isLock ? lockIcon : unlockIcon" class="width-24 cursor-p mar-l-20" @click="doDecrypt(0)">
                  </el-tooltip>
                </template>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex">
                  <div class="font-color-9 width-72">订单编号：</div>
                  <div class="flex-item">{{ apartOrderObj.orderNo }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">创建时间：</div>
                  <div class="flex-item">{{ apartOrderObj.createTime }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">支付时间：</div>
                  <div class="flex-item">{{ apartOrderObj.payTime }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">买家：</div>
                  <div class="flex-item">{{ apartOrderObj.projectOrder.customerNickname }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">买家电话：</div>
                  <div class="flex-item">{{ apartOrderObj.projectOrder.customerPhone }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">配送方式：</div>
                  <div class="flex-item">{{ dict.deliveryType[apartOrderObj.deliveryType] }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">收货地址：</div>
                  <div class="flex-item">
                    <span>{{ apartOrderObj.projectOrder.customerFullAddress }}</span>
                    <a href="javascript:;" @click="handleClipboard(apartOrderObj.projectOrder.customerFullAddress, $event)"><span class="mar-l-10 font-blue">复制</span></a>
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">买家留言：</div>
                  <div class="flex-item">{{ apartOrderObj.projectOrder.customerComment }}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="bg-color-white">
              <div class="title-top flex v-align-c flex-center height-44 pad-l-27 pad-r-27">
                <div class="flex-item font-w font-16">订单信息</div>
              </div>
              <div class="pad-t-15 pad-b-15 pad-l-30 pad-r-10 mar-l-30 mar-r-10 buyer-info-line">
                <div class="flex">
                  <div class="font-color-9 width-72">订单状态：</div>
                  <div class="flex-item">
                    <div class="mar-t--15 mar-b--5">
                      <b class="font-26" :class="statusStyle">
                        {{ dict.orderStatus[apartOrderObj.orderStatus] }}
                      </b>
                    </div>
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">售后状态：</div>
                  <div class="flex-item">{{ dict.afterSaleStatus[apartOrderObj.afterSaleStatus] }}</div>
                </div>
                <div class="flex" v-if="apartOrderObj.warehouseInfo">
                  <div class="font-color-9 width-72">发货仓：</div>
                  <div class="flex-item">{{ apartOrderObj.warehouseInfo.warehouseName }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">快递公司：</div>
                  <div class="flex-item">{{ apartOrderObj.expressName }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">快递单号：</div>
                  <div class="flex-item">
                    <span>{{ apartOrderObj.trackingNo }}</span>
                    <a v-if="apartOrderObj.trackingNo" href="javascript:;" @click="doOpenLogistics"><span class="mar-l-10 font-blue">查看物流</span></a>
                  </div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">发货时间：</div>
                  <div class="flex-item">{{ apartOrderObj.deliveryTime }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">收货时间：</div>
                  <div class="flex-item">{{ apartOrderObj.receivedTime }}</div>
                </div>
                <div class="flex">
                  <div class="font-color-9 width-72">完成时间：</div>
                  <div class="flex-item">{{ apartOrderObj.completeTime }}</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="bgc-default pad-l-20 pad-r-20 pad-b-20">
      <div class="bg-color-white pad-l-20 pad-r-20 pad-b-20 pad-t-10">
        <!-- 商品信息 -->
        <div class="tabs-box">
          <el-tabs value="goodsInfo">
            <el-tab-pane label="商品信息" name="goodsInfo">
              <el-table :data="orderGoodsList">
                <el-table-column min-width="350px" label="商品信息" prop="goodsTitle">
                  <template slot-scope="scope">
                    <div class="flex v-align-c">
                      <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="t-goods-pic"></label>
                      <div class="font-12 pad-l-10">{{ scope.row.goodsTitle }}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="180px" label="规格" prop="skuDetail" align="center">
                  <template slot-scope="scope">
                    <div class="font-blue">
                      {{ !scope.row.skuDetail ? '无' : scope.row.skuDetail }}
                    </div>
                  </template>
                </el-table-column>



                <el-table-column v-if="apartOrderObj.source == 10" width="135px" label="零售价" prop="goodsPrice" align="center">
                  <template slot-scope="scope">
                    <div>￥{{ scope.row.goodsPrice }}</div>
                  </template>
                </el-table-column>

								<el-table-column  v-else width="120px" label="供应价" align="center">
                  <template slot-scope="scope">
                    <div>
                      <span v-if="scope.row.supplyOrderGoodsId">￥{{ scope.row.supplyAlliancePrice }}</span>
                      <span v-else>{{ scope.row.goodsSupplyPrice ? '￥' + scope.row.goodsSupplyPrice : '' }}</span>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column v-if="apartOrderObj.projectOrder.sellApartOrderId != null" 
                  width="120px" 
                  label="销方商品单价" 
                  prop="sellGoodsPrice" 
                  align="right">
								</el-table-column>

                <el-table-column width="135px" label="数量">
                  <template slot-scope="scope">
                    <div>商品数：{{ scope.row.goodsNum }}</div>
                    <div>发货数：{{ scope.row.deliveryNum }}</div>
                    <div>售后数：{{ scope.row.afterSaleGoodsNum }}</div>
                    <div>截停数：{{ scope.row.stopNum }}</div>
                  </template>
                </el-table-column>
                <el-table-column width="135px" label="售后状态">
                  <template slot-scope="scope">
                    <div>{{ apartOrderObj.projectOrder.orderType == 33 || apartOrderObj.projectOrder.orderType == 34 
                      ? dict.platformAfterSaleStatus[scope.row.platformAfterSaleStatus] : dict.afterSaleStatus[scope.row.afterSaleStatus]}}</div>
                  </template>
                </el-table-column>
                <el-table-column v-if="operateColumnFlag" width="100px" label="操作" align="right" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" size="medium" @click="doChangeGoods(scope.row)">修改商品</el-button>
                    <el-button type="text" size="medium" v-if="scope.row.skuId" @click="doChangeGoodsSku(scope.row)">修改规格</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <table class="table-foot">
                <tr>
                  <td class="left">商品小计：</td>
                  <td>￥{{ apartOrderObj.goodsAmount ||  '&nbsp;' }}</td>
                </tr>
                <tr>
                  <td class="left">运费：</td>
                  <td>￥{{ apartOrderObj.freight ||  '0.00' }}</td>
                </tr>
                <tr class="font-18 font-w">
                  <td class="left">订单合计：</td>
                  <td class="font-red"><b>￥{{ (apartOrderObj.goodsAmount * 1 + (apartOrderObj.freight||0) * 1).toFixed(2) }}</b></td>
                </tr>
              </table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="height-70"></div>
      <div class="bottom-bar">
        <!-- <el-button @click="doBack">返回上一级</el-button> -->
        <el-button v-if="deliveryBtnFlag" type="primary" @click="doOpenDeliver">发货</el-button>
        <el-button v-if="cancelWarehouseFlag" type="primary" @click="doCancel">撤销分仓</el-button>
        <el-button v-if="resetWarehouseFlag" type="primary" @click="doReset">重新分仓</el-button>
      </div>

      <!-- 发货单管理dialog -->
      <el-dialog width="1200px" title="发货单管理" v-el-drag-dialog :visible.sync="orderDeliverVisible">
        <order-send-manage :showFlag="orderDeliverVisible" 
          :apartOrderId="apartOrderObj.apartOrderId" 
          @callback="doCallbackOrderDeliver">
        </order-send-manage>
      </el-dialog>

      <!-- 订单物流dialog -->
      <el-dialog width="700px" title="物流动态" v-el-drag-dialog :visible.sync="orderLogisticsVisible">
        <order-logistics :showFlag="orderLogisticsVisible" 
          :apartOrderId="apartOrderObj.apartOrderId" 
          @callback="doCallbackOrderLogistics">
        </order-logistics>
      </el-dialog>

      <!-- 选择商品dialog -->
      <el-dialog width="1000px" v-el-drag-dialog title="选择商品" :visible.sync="selectSkuVisible">
        <select-goods-sku :showFlag="selectSkuVisible" 
          :goodsId="selectedGoodsId" 
          :apartOrderSource="apartOrderObj.source" 
          :supplierId="apartOrderObj.supplierId"
          @callback="doCallbackSelect">
        </select-goods-sku>
      </el-dialog>

      <!-- 根据角色选择仓库商品dialog -->
      <el-dialog width="800px" v-el-drag-dialog title="选择商品" :visible.sync="selectWarehouseGoodsVisible">
        <select-warehouse-goods-by-role :showFlag="selectWarehouseGoodsVisible" 
          :goodsId="selectedGoodsId" 
          :apartOrderSource="apartOrderObj.source" 
          :supplierId="apartOrderObj.supplierId"
          @callback="doCallbackSelect">
        </select-warehouse-goods-by-role>
      </el-dialog>

    </div>  
  </div>
</template>

<script>
  import { getDictByGroupName } from '@/api/common/common'
  import { getApartOrder, doCancelWarehouse, doResetWarehouse } from '@/api/goods/apartOrder'
  import { doChangeOrderGoods } from '@/api/goods/orderGoods'
  import { decryptReceiveInfo } from '@/api/goods/thirdOrder'
  import unlockIcon from '@/assets/images/unlock-icon.png'
  import lockIcon from '@/assets/images/lock-icon.png'
  import clipboard from '@/utils/clipboard'
  import elDragDialog from '@/directive/el-dragDialog'
  import orderSendManage from '@/views/goods/order/components/order-send-manage'
  import orderLogistics from '@/views/goods/order/components/order-logistics'
  import selectGoodsSku from '@/views/goods/order/components/select-goods-sku'
  import selectWarehouseGoodsByRole from '@/views/goods/order/components/select-warehouse-goods-by-role'

  export default {
    components: { orderSendManage, orderLogistics, selectGoodsSku, selectWarehouseGoodsByRole },
    directives: {
      elDragDialog
    },
    data() {
      return {
        // 子订单对象
        apartOrderObj: {
          apartOrderId: '',
          projectOrder: {}
        },
        // 商品集合
        orderGoodsList: [],
        // 步骤条
        activeStep: 1,
        // 步骤描述
        stepTitle: '供应商发货',
        // 状态样式
        statusStyle: 'font-pink',
        // 数据字典
        dict: {
          orderStatus: {},
          afterSaleStatus: {},
          platformAfterSaleStatus: {},
          deliveryType: {}
        },
        // 商品表单
        orderGoodsForm: {
          orderGoodsId: '',
          goodsId: '',
          skuId: ''
        },
        // 锁图标
        lockIcon,
        unlockIcon,
        // 锁标识
        isLock: false,
        // 选中的商品id
        selectedGoodsId: '',
        fullLoading: false,
        // 是否企业角色
        enterpriseRoleFlag: false,
        // 操作列flag
        operateColumnFlag: false,
        // 发货按钮控制
        deliveryBtnFlag: false,
        // 撤销分仓flag
        cancelWarehouseFlag: false,
        // 重新分仓flag
        resetWarehouseFlag: false,
        // 选择商品visible
        selectSkuVisible: false,
        selectWarehouseGoodsVisible: false,
        // 订单发货visible
        orderDeliverVisible: false,
        // 订单物流visible
        orderLogisticsVisible: false
      }
    },
    created() {
      this.enterpriseRoleFlag = this.getEnterpriseId() && !this.getSupplierId() && !this.getWarehouseId()
      const apartOrderId = this.getCurrentPage().query.apartOrderId
      this.apartOrderObj.apartOrderId = apartOrderId
      // 获取数据字典
      getDictByGroupName('ProjectOrderDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      getDictByGroupName('ProjectOrderGoodsDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.cancelWarehouseFlag = false
        this.resetWarehouseFlag = false
        this.operateColumnFlag = false
        this.deliveryBtnFlag = false
        this.fullLoading = true
        getApartOrder(this.apartOrderObj.apartOrderId).then(response => {
          this.fullLoading = false
          if (response.isError) return
          const data = response.data
          this.orderGoodsList = data.orderGoodsList
          this.apartOrderObj = response.data
          switch (data.orderStatus) {
            default:
            case 1:
              this.activeStep = 1
              this.statusStyle = 'font-orange'
              break
            case 2:
              this.activeStep = 2
              this.statusStyle = 'font-blue'
              break
            case 3:
            case 4:
              this.activeStep = 3
              this.statusStyle = 'font-green'
              break
          }
          this.isLock = this.apartOrderObj.projectOrder.encryptReceiveFlag === 1
          // 按钮控制
          if (data.orderStatus === 1) {
            if (this.enterpriseRoleFlag) {
              if (data.warehouseId) {
                this.cancelWarehouseFlag = true
              } else {
                this.operateColumnFlag = true
              }
              if (data.waitSeparateWarehouseFlag === 1) {
                this.resetWarehouseFlag = true
              }
            }
            if (data.warehouseInfo) {
              this.stepTitle = '仓库发货'
              this.deliveryBtnFlag = data.warehouseInfo.warehouseType !== 2 && this.getWarehouseId() === data.warehouseId
            } else {
              this.deliveryBtnFlag = data.source !== 30 && data.waitSeparateWarehouseFlag !== 1
            }
          }
        })
      },
      // 解密事件
      doDecrypt(decryptReportType) {
        if (!this.isLock) {
          // 不再解密
          return
        }
        this.fullLoading = true
        decryptReceiveInfo(this.apartOrderObj.projectOrder.externalOrderNo, this.apartOrderObj.projectOrder.externalPlatformType, decryptReportType).then(response => {
          this.fullLoading = false
          if (response.isError) return
          this.isLock = false
          const data = response.data
          this.apartOrderObj.projectOrder.customerNickname = data.customerName
          this.apartOrderObj.projectOrder.customerPhone = data.customerPhone
          this.apartOrderObj.projectOrder.customerFullAddress = data.consigneeDetailAddress
        })
      },
      // 撤销分仓事件
      doCancel() {
        this.fullLoading = true
        doCancelWarehouse(this.apartOrderObj.apartOrderId).then(response => {
          if (response.isError) {
            this.fullLoading = false
            return
          }
          this.$message({ type: 'success', message: '撤销成功' })
          this.init()
        })
      },
      // 重新分仓事件
      doReset() {
        this.fullLoading = true
        doResetWarehouse(this.apartOrderObj.apartOrderId).then(response => {
          if (response.isError) {
            this.fullLoading = false
            return
          }
          this.$message({ type: 'success', message: '分仓成功' })
          this.init()
        })
      },
      // 修改商品事件
      doChangeGoods(row) {
        const originData = this.$options.data()
        this.orderGoodsForm = originData.orderGoodsForm
        this.orderGoodsForm.orderGoodsId = row.orderGoodsId
        this.selectedGoodsId = ''
        if (this.apartOrderObj.waitSeparateWarehouseFlag === 1) {
          this.selectWarehouseGoodsVisible = true
        } else {
          this.selectSkuVisible = true
        }
      },
      // 修改规格事件
      doChangeGoodsSku(row) {
        const originData = this.$options.data()
        this.orderGoodsForm = originData.orderGoodsForm
        this.orderGoodsForm.orderGoodsId = row.orderGoodsId
        this.selectedGoodsId = row.goodsId
        if (this.apartOrderObj.waitSeparateWarehouseFlag === 1) {
          this.selectWarehouseGoodsVisible = true
        } else {
          this.selectSkuVisible = true
        }
      },
      // 商品选择回调事件
      doCallbackSelect(goods) {
        this.orderGoodsForm.goodsId = goods.goodsId
        this.orderGoodsForm.skuId = goods.skuId
        doChangeOrderGoods(this.orderGoodsForm).then(response => {
          if (response.isError) return
          this.$message({ type: 'success', message: '修改成功' })
          this.selectSkuVisible = false
          this.selectWarehouseGoodsVisible = false
          this.init()
        })
      },
      // 复制事件
      handleClipboard(text, event) {
        clipboard(text, event)
      },
      // 打开发货dialog事件
      doOpenDeliver() {
        this.orderDeliverVisible = true
      },
      // 订单发货回调事件
      doCallbackOrderDeliver(callbackFlag) {
        if (callbackFlag) {
          this.init()
        }
        this.orderDeliverVisible = false
      },
      // 打开订单物流dialog事件
      doOpenLogistics() {
        this.orderLogisticsVisible = true
      },
      // 订单物流动态回调事件
      doCallbackOrderLogistics() {
        this.orderLogisticsVisible = false
      },
      // 返回事件
      doBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="less" scoped>
  .table-foot {
    width: 100%;
    border-bottom: 1px solid #EBEEF5;
    padding: 10px 0;
    .left {
      width: 93%;
      text-align: right;
    }
  }
  .title-top {
    border-bottom: #eff1f6 1px solid;
  }
  .buyer-info-line {
    line-height: 2.2;
    height: 300px;
    height: auto!important;
    min-height: 300px;
    overflow: visible;
  }
</style>
